<template>
  <div class="bottom-navigation">
    <div
      v-for="item in navItems"
      :key="item.id"
      class="nav-item"
      :class="{ active: isActive(item.path) }"
      @click="handleNavClick(item.path)"
      :style="{ '--item-color': item.color }"
    >
      <div class="nav-icon">
        <component :is="item.icon" :size="24" />
        <div v-if="isActive(item.path)" class="active-indicator" />
      </div>
      <span class="nav-label">{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
import { Map, MessageCircle, User, Compass } from 'lucide-vue-next'

export default {
  name: 'BottomNavigation',
  components: {
    Map,
    MessageCircle,
    User,
    Compass
  },
  data() {
    return {
      navItems: [
        {
          id: 'map',
          label: '地图',
          icon: 'Map',
          path: '/map',
          color: '#4ecdc4'
        },
        {
          id: 'messages',
          label: '消息',
          icon: 'MessageCircle',
          path: '/messages',
          color: '#ff6b6b'
        },
        {
          id: 'discovery',
          label: '发现',
          icon: 'Compass',
          path: '/discovery',
          color: '#ffd700'
        },
        {
          id: 'profile',
          label: '我的',
          icon: 'User',
          path: '/profile',
          color: '#f093fb'
        }
      ]
    }
  },
  methods: {
    handleNavClick(path) {
      this.$router.push(path)
    },
    isActive(path) {
      return this.$route.path === path || (this.$route.path === '/' && path === '/map')
    }
  }
}
</script>

<style scoped>
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
  min-width: 60px;
  position: relative;
  background: transparent;
  color: #718096;
}

.nav-item:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  transform: translateY(-2px);
}

.nav-item.active {
  background: rgba(102, 126, 234, 0.9);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-icon {
  position: relative;
  margin-bottom: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item.active .nav-icon {
  transform: scale(1.1);
}

.nav-item:hover .nav-icon {
  transform: scale(1.05);
}

.active-indicator {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-label {
  font-size: 11px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nav-item.active .nav-label {
  color: white;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .bottom-navigation {
    height: 70px;
  }
  
  .nav-item {
    padding: 6px 8px;
    min-width: 50px;
  }
  
  .nav-label {
    font-size: 10px;
  }
}
</style>